<template>
  <div class="app-container">
    <h2 style="text-align: center;">发布新课程</h2>

    <el-steps :active="1" process-status="wait" align-center style="margin-bottom: 40px;">
      <el-step title="填写课程基本信息"/>
      <el-step title="创建课程大纲"/>
      <el-step title="提交审核"/>
    </el-steps>

    <el-form label-width="120px">
      <el-form-item label="课程标题">
        <el-input v-model="addCourseDto.title" placeholder="参照:一节课带你全盘掌握分布式事务解决方案"/>
      </el-form-item>

      <!-- 所属分类 TODO -->
      <el-form-item label="课程分类">
        <el-select v-model="addCourseDto.subjectParentId" clearable placeholder="一级分类" @change="getTwoSubject">
          <!--遍历显示所有的科目
               v-for 遍历操作
               value 双向绑定的数据
               label 文本显示
          -->
          <el-option v-for="one in subjectOneList" :value="one.id" :label="one.title"/>
        </el-select>

        <el-select v-model="addCourseDto.subjectId" placeholder="二级分类">
          <!--遍历显示所有的科目
               v-for 遍历操作
               value 双向绑定的数据
               label 文本显示
          -->
          <el-option v-for="two in subjectTwoList" :value="two.id" :label="two.title"/>
        </el-select>

      </el-form-item>

      <!-- 课程讲师 TODO -->
      <el-form-item label="培训师">
        <el-select v-model="addCourseDto.trainerId">
          <!--
             label  下拉框的文本        trainer。name
             value  下拉框的选中的数据   trainer。id
          -->
          <el-option v-for="trainer in trainerList" :value="trainer.id" :label="trainer.name"/>
        </el-select>

      </el-form-item>

      <el-form-item label="总课时">
        <el-input-number
          :min="0"
          v-model="addCourseDto.lessonNum"
          controls-position="right"
          placeholder="请填写课程的总课时数"/>
      </el-form-item>

      <!-- 课程简介 TODO -->
      <el-form-item label="课程简介">
        <el-input v-model="addCourseDto.description"/>
      </el-form-item>

      <!-- 课程封面 TODO -->
      <el-form-item label="课程封面">
        <el-upload
          class="avatar-uploader"
          action="http://localhost:8080/file/upload"
          :show-file-list="false"
          :on-success="handleAvatarSuccess">
          <img v-if="imageUrl" :src="imageUrl" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>

      <el-form-item label="课程价格">
        <el-input-number
          :min="0"
          v-model="addCourseDto.price"
          controls-position="right"
          placeholder="免费课程请设置为0元"/>
        元
      </el-form-item>

      <el-form-item>
        <el-button :disabled="saveBtnDisabled" type="primary" @click="addCourseAndNext">保存并下一步</el-button>
      </el-form-item>
    </el-form>

  </div>
</template>

<script>

  import trainer from "@/api/trainer";
  import subject from "@/api/subject";
  import course from "@/api/course";

  export default {
    name: "add",
    data() {
      return {
        saveBtnDisabled: false, //false 可以点击  true 不能点击
        addCourseDto: {
          subjectParentId: "",
          subjectId: ""
        },
        subjectOneList: [],    //一级菜单数组
        subjectTwoList: [],    //二级菜单数组
        trainerList: [],        //讲师的数组
        imageUrl: ""
      }
    },
    methods: {

      handleAvatarSuccess(resp) {
        //设置图片回显
        this.imageUrl = resp.data;
        //把图片的Url 复制给存储对象
        this.addCourseDto.cover = resp.data;

      },

      //保存到下一步的操作
      addCourseAndNext() {
        //设置图片
        this.addCourseDto.cover = "https://img0.baidu.com/it/u=3723975964,4048825649&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=857";
        //保存课程
        course.addCourse(this.addCourseDto).then(resp => {
          //跳转到 大纲页面
          //拿到返回结果 courseId
          //把Id 携带到 大纲页面
          let courseId = resp.data;

          //路由携带参数: path 进行拼接 + 路由配置 (chapter/:courseId)
          this.$router.push("/course/chapter/" + courseId);
        })
      },
      findTrainers() {
        trainer.findTrains().then(resp => {
          this.trainerList = resp.data;
        })
      },

      //查询二级菜单
      getTwoSubject() {
        console.log(this.addCourseDto.subjectParentId);
        //把选中的 二级菜单置空
        this.addCourseDto.subjectId = "";
        subject.findSubjectByParentId(this.addCourseDto.subjectParentId).then(resp => {
          this.subjectTwoList = resp.data;
        });
      },
      //查询一级菜单
      findLevelList(parentId) {
        subject.findSubjectByParentId(parentId).then(resp => {
          this.subjectOneList = resp.data;
        })
      }
    },
    created() {
      //查询一级菜单
      this.findLevelList("0");
      //查询所有的老师
      this.findTrainers();

      //拿到 大纲页面的数据  进行courseId 的查询  进行数据回显
      if (this.$route.params.courseId) {
        let courseId = this.$route.params.courseId;
        //通过课程Id查询课程
        course.getCourseById(courseId).then(resp => {
          //进行回显
          this.addCourseDto = resp.data;
          this.imageUrl = this.addCourseDto.cover
          //查询二级菜单
          subject.findSubjectByParentId(this.addCourseDto.subjectParentId).then(resp => {
            this.subjectTwoList = resp.data;
            console.log()
          });
        });
      }
    }
  }
</script>

<style scoped>

  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 128px;
    height: 128px;
    line-height: 128px;
    text-align: center;
  }

  .avatar {
    width: 128px;
    height: 128px;
    display: block;
  }

</style>
